<template>
  <div>

    <basic-container>
      <div class="playbox">
        <div class="playboxtitle">
          <div>
            <span>注意事项：</span>
          </div>
          <div>
            <span>1. 玩家账号需要有创建角色的才能进行换绑；如果未创建角色，请等待玩家创角后再操作。</span>
          </div>
          <div>
            <span>2. 玩家账号必须归属于您以及您的下级推广账号才能换绑。</span>
          </div>
          <div>
            <span>3. 玩家换绑换后更新数据需要一定时间，可点击【换绑记录】中查看操作执行的结果，玩家换绑为不可逆操作，请谨慎操作。</span>
          </div>
        </div>
      </div>
      <el-row style="margin-top: 20px">
        <el-col>
          <el-form :inline="true">



            <el-form-item>
              <el-select v-model="formInline.promoteId" filterable  clearable  placeholder="推广员">
                <el-option
                  v-for="item in leadList"
                  :key="item.id"
                  :label="item.account"
                  :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="关键字" v-model=" input " clearable class="input-with-select">
                <el-select v-model="select" slot="prepend">
                  <el-option label="玩家账号" value="玩家账号"></el-option>
                  <el-option label="角色名称" value="角色名称"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item label="游戏" >
              <el-select  v-model="formInline.projectId" filterable clearable placeholder="请选择" >
                <el-option
                  v-for="item in gamelist"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
              <el-button type="danger" icon="el-icon-edit" @click="unblock">批量换绑</el-button>
              <el-button type="danger" @click="bindingRecord">换绑记录</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    <el-row>
      <el-col :span="24">
        <template>
          <el-table
            :data="tableData"
            stripe
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="account"
              label="玩家账号">
              <template slot-scope="scope">
                <span v-if="scope.row.phone!=''"><span
                  class="skucost-pruice">{{ scope.row.phone}}</span></span>
                <span v-else><span
                  class="skucost-pruice">{{ scope.row.account}}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="游戏-区服-角色">
              <template slot-scope="scope">
                <span>{{ scope.row.gameName +"-"}}</span>
                <span v-if="scope.row.osType==1">Android-</span>
                <span v-else>ios-</span>
                <span v-if="scope.row.serverName">{{ scope.row.serverName +"-"}}</span>
                <span v-if="scope.row.roleName">{{ scope.row.roleName}} </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="注册时间">
            </el-table-column>
            <el-table-column
              prop="paccount"
              label="组长账号">
            </el-table-column>
            <el-table-column
              prop="promoter"
              label="推广员账号">
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="playerSwap(scope.row)">玩家换绑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10,20, 50, 100, 200]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog title="玩家换绑" :visible.sync="dialogFormVisible" @close="closepasswordDialog()" customClass="dialog-Width">
      <div v-if="dialogFormVisible">
        <el-row>
          <el-col span="5" class="lab">
            <span>玩家账号：</span>
          </el-col>
          <el-col span="19">
            <div>
              <span v-if="row.phone==''">{{row.palyAccount}}</span>
              <span v-else>{{row.phone}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col span="5" class="lab">
            <span>角色信息：</span>
          </el-col>
          <el-col span="19">
            <div  v-for="(item,index ) in playRoleList" :key="index" >
              <span>{{ item.gameName +"-"}}</span>
              <span>{{ item.serverName +"-"}}</span>
              <span>{{ item.roleName}} </span>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px">
          <el-col span="5" class="lab">
            <span>推广归属账号：</span>
          </el-col>
          <el-col span="19">
            <span v-if="row.level==2">推广商：{{row.promoteMangerName}}</span>
            <span v-if="row.level==3">组长：{{row.paccount}}，推广员：</span>
            <span v-if="row.level==4">组长：{{row.paccount}}，推广员：{{row.promoter}}</span>
          </el-col>
        </el-row>
        <el-form :model="form" :rules="rules"  class="demo-ruleForm" ref="ruleForm">
        <el-row style="margin-top: 20px">
          <el-col span="5" class="lab">
            <span ><span style="color: red">*</span>换绑至推广账号：</span>
          </el-col>
          <el-col span="19">
            <el-form-item label="" :required="true"  prop="promoter">
            <el-select v-model="form.promoter" filterable clearable  placeholder="请选择">
              <el-option
                v-for="item in allInfo"
                :key="item.id"
                :label="item.account+(item.realName||'')+item.levelName "
                :value="item.id"
                :disabled="item.disabled">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
        <el-row style="margin-top: 20px">
          <el-col span="5" class="lab">
            <span>指定订单日期：</span>
          </el-col>
          <el-col span="19">
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-row>

        <div class="playboxtitle">
          <div>
            <span>说明：不指定订单日期则默认全部充值订单进行迁移，指定订单日期之后（含指定日期当天）产生的游戏充值订单也迁移至新推广账号。</span>
          </div>
          <div>
            <span> 例如：改玩家在11月1日充值了200元，11月2日充值了300元，如果指定订单日期为11月2日， 那么将迁移300元至新推广账号，200元将归属原推广账号。</span>
          </div>

        </div>


      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closepasswordDialog()">取 消</el-button>
        <el-button type="primary" @click="suer('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
      <el-dialog title="批量换绑" :visible.sync="dialogBulkExchange" @close="closedialogBulkExchange()" customClass="dialog-Width">
        <div v-if="dialogBulkExchange">
          <el-row>
            <el-col :span="24">
              <template>
                <el-table
                  :data="multipleSelection"
                  stripe
                  style="width: 100%">
                  <el-table-column
                    prop="account"
                    label="玩家账号">
                    <template slot-scope="scope">
                <span v-if="scope.row.phone!=''"><span
                  class="skucost-pruice">{{ scope.row.phone}}</span></span>
                      <span v-else><span
                        class="skucost-pruice">{{ scope.row.account}}</span></span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="游戏-区服-角色">
                    <template slot-scope="scope">
                      <span>{{ scope.row.gameName +"-"}}</span>
                      <span>{{ scope.row.serverName +"-"}}</span>
                      <span>{{ scope.row.roleName}} </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="promoterName"
                    label="归属账号">
                  </el-table-column>
                </el-table>
              </template>
            </el-col>
          </el-row>

        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closedialogBulkExchange()">取 消</el-button>
          <el-button type="primary" @click="suerBulkExchange('ruleForm')">下一步</el-button>
        </div>
      </el-dialog>


      <el-dialog title="确定批量换绑" :visible.sync="dialogSuertBulkExchange" @close="closedialogSuertBulkExchange()" customClass="dialog-Width">
        <div v-if="dialogSuertBulkExchange">
          <el-form :model="form" :rules="rules"  class="demo-ruleForm" ref="ruleForm">
            <el-row style="margin-top: 20px">
              <el-col span="5" class="lab">
                <span ><span style="color: red">*</span>换绑至推广账号：</span>
              </el-col>
              <el-col span="19">
                <el-form-item label="" :required="true"  prop="promoter">
                  <el-select v-model="form.promoter" filterable clearable  placeholder="请选择">
                    <el-option
                      v-for="item in allInfo"
                      :key="item.id"
                      :label="item.account+(item.realName||'')+item.levelName "
                      :value="item.id"
                      :disabled="item.disabled">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row style="margin-top: 20px">
            <el-col span="5" class="lab">
              <span>指定订单日期：</span>
            </el-col>
            <el-col span="19">
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-col>
          </el-row>
          <div class="playboxtitle">
            <div>
              <span>说明：不指定订单日期则默认全部充值订单进行迁移，指定订单日期之后（含指定日期当天）产生的游戏充值订单也迁移至新推广账号。</span>
            </div>
            <div>
              <span> 例如：改玩家在11月1日充值了200元，11月2日充值了300元，如果指定订单日期为11月2日， 那么将迁移300元至新推广账号，200元将归属原推广账号。</span>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closedialogSuertBulkExchange()">取 消</el-button>
          <el-button type="primary" @click="suerSuertBulkExchange('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>

  </basic-container>
  </div>
</template>

<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
}
</style>

<script>

import {getPlayList, playList,recordInster, promoterList,recordInsterBatch} from "@/api/system/details";
import {allInfo} from "@/api/system/user";
import {gameList} from "@/api/game/game";
export default {
  data() {
    return {
      leading: true,
      value1: null,
      form: {
        promoter: '',
      },

      input: '',
      select: '账号名称',
      tableData: [],
      allInfo: [],
      playRoleList: [],
      leadList: [],
      dialogFormVisible: false,
      dialogBulkExchange: false,
      dialogSuertBulkExchange: false,
      multipleSelection: [],
      idss: '',
      formInline: {
        roleName: '',
        account: '',
        promoteId: '',
        projectId: '',
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },
      row: {
        palyAccount: '',

      },
      rules: {
        promoter: [
          {required: true, message: '请选择推广员', trigger: 'blur'}
        ],
      },
    }

  },

  computed: {

  },
  created() {
    this.userInfo()
    this.game()
    this.nowloadManger()
  },
  methods: {
    game() {
      gameList().then(res => {
        const data = res.data.data;
        console.log("data", data)
        this.gamelist = data;
      });
    },
    closedialogBulkExchange() {
      this.dialogBulkExchange = false
      this.idss = ""
    },
    closedialogSuertBulkExchange() {
      this.dialogSuertBulkExchange = false
      this.idss = ""
    },
    suerBulkExchange() {
      this.dialogBulkExchange = false
      this.dialogSuertBulkExchange = true
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    nowloadManger() {
      promoterList().then(res => {
        const data = res.data.data;
        this.leadList = data;
      });
    },
    bindingRecord() {
      this.$router.push({name: '换绑记录', path: '/role/play', query: {id: ''}});
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.onSubmit();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      this.onSubmit();
    },

    playerSwap(row) {
      this.row = row
      console.log("row", this.row)
      this.dialogFormVisible = true
      this.playList(row)

    },
    /* 关闭清空表单 */
    closepasswordDialog() {
      this.row = {}
      this.form.promoter = null
      this.value1 = ''
      this.dialogFormVisible = false;
    },
    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    isEmpty(arr) {
      return !this.isNotEmpty(arr)
    },
    unblock(){
      if(this.multipleSelection.length==0){
        this.$message({
          type: "error",
          message: "请先选择需要换绑的玩家"
        });
        return;
      }
      this.dialogBulkExchange = true
    },
    suerSuertBulkExchange(ruleForm){
      this.$confirm("是否批量换绑玩家?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.dialogSuertBulkExchange = false;
            var startTime = undefined;
            if (this.isNotEmpty(this.value1)) {
              startTime = this.value1.getTime()
            }

            var bladeRecord = {
              userRoleVOS :  this.multipleSelection,
              newPromoterId : this.form.promoter,
              time : startTime,
            }
            recordInsterBatch(bladeRecord).then(res => {
              if (res.data.success) {
                this.form = {}
                this.$message({
                  type: "success",
                  message: "新增信息成功!"
                });
                this.onSubmit();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg
                });
              }
            })
          } else {
            return false
          }
        })
      })
    },
    /* 确定 */
    suer(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          var startTime = undefined;
          if (this.isNotEmpty(this.value1)) {
            startTime = this.value1.getTime()
          }
          if (this.row.promoteId == this.form.promoter) {
            this.$message({
              type: "error",
              message: "换绑推广员不能同一个账号!"
            });
            return;
          }
          recordInster(this.row.accountId, this.row.palyAccount, this.row.promoteId, this.row.promoter, this.form.promoter, startTime).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "新增信息成功!"
              });
              this.onSubmit();
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          })
        } else {
          return false
        }
      })


    },
    onSubmit() {
      this.onload();
      this.nowloadManger()
    },
    onload() {
      if(this.isEmpty(this.input)&&this.isEmpty(this.formInline.promoteId)&&this.isEmpty(this.formInline.projectId)){
        this.$message({
          type: "success",
          message: "查询条件不能为空!"
        });
        return;
      }
      if (this.select == '角色名称') {
        this.formInline.account = ''
        this.formInline.roleName = this.input
        console.log("this.formInline.roleName", this.input)
      } else {
        this.formInline.roleName = ''
        this.formInline.account = this.input
        console.log("this.formInline.account", this.input)
      }
      this.loading = true;
      getPlayList(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
      });
    },
    playList(row) {
      playList(row.accountId).then(res => {
        const data = res.data.data;
        this.playRoleList = data;
      });
    },
    userInfo() {
      allInfo().then(res => {
        const data = res.data.data;
        this.allInfo = data;
      });
    }
  }

}
</script>

<style>
.playbox {
  margin-top: 22px;
  width: 100%;
  background-color: #F4F4F5;
}

.playboxtitle {
  padding: 10px 18px;
  font-size: 13px;
  line-height: 18px;
  color: #909399;
}

.lab {
  display: inline-block;
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  color: #606266;
}

.dialog-Width {
  width: 35%;
  background-color: #FFFFFF !important;
}
</style>
